<template>
  <div>
    <s-table
      @mouseleave.native="onMouseLeaveTable"
      ref="tableList"
      size="mini"
      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
      row-key="id"
      :customRow="
        (record, index) => {
          return {
            on: {
              mouseenter: (e) => {
                this.currentRowId = record.id
              },
            },
          }
        }
      "
      :columns="columns"
      :data="loadData"
    >
      <!-- 产品名称 -->
      <template slot="goods_name" slot-scope="text, goods">
        <div class="good_info">
          <img :src="goods.cover_pic" alt="" />
          <div class="info">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ goods.name }} </span>
              </template>
              <div style="font-weight: bold; font-size: 14px" class="of_el">
                {{ goods.name }}
              </div>
            </a-tooltip>
            <div style="color: rgb(0, 0, 0, 0.45); font-size: 14px" class="of_el">
              {{ goods.cat ? goods.cat.map((item) => item.name).join() : '暂无分类' }}
            </div>
          </div>
          <div style="position: relative" class="space">
            <a-icon
              class="table_operator_icon"
              size="small"
              v-show="currentRowId == goods.id || goods.visible0"
              type="edit"
              @click="openPopover(goods, 0, $event)"
              title="编辑"
            />
            <MyPopover
              :title="'产品名称'"
              @onSubmit="submitUpdate(goods, 0)"
              :visible.sync="goods.visible0"
              :isHarf="goods.isHarf"
            >
              <a-textarea placeholder="请输入商品名称" v-model="updateParams.name" style="width: 250px" />
            </MyPopover>
          </div>
        </div>
      </template>
      <!-- 产品类型 -->
      <template slot="product_type" slot-scope="text, goods">
        <span v-if="text == 0">普通商品</span>
        <span v-if="text == 1">酒店预约</span>
        <span v-if="text == 2">服务预约</span>
      </template>
      <!-- 售价 -->
      <template slot="price" slot-scope="text, goods">
        <div class="edit-good">
          <span> {{ text }}元 </span>
          <div v-if="goods.product_type == 0">
            <div style="position: relative" class="space">
              <a-icon
                class="table_operator_icon"
                size="small"
                type="edit"
                title="编辑"
                v-show="currentRowId == goods.id || goods.visible1"
                @click="setAttr(goods.id, goods.attr, goods, 1)"
              />
              <MyPopover
                :title="'售价'"
                @onSubmit="submitUpdate(goods, 1)"
                :visible.sync="goods.visible1"
                :isHarf="goods.isHarf"
                :showBtn="false"
              >
                <!-- 有规格时插槽 -->
                <!-- goods.use_attr == 1 -->
                <div v-if="false">
                  <a-table
                    v-if="attr.length > 0"
                    ref="table"
                    :columns="attrColumns"
                    class="slotTable"
                    :style="{ marginTop: '10px', maxHeight: '120px', overflowY: 'scroll', minHeight: '0px' }"
                    bordered
                    :dataSource="attr"
                    size="small"
                    :row-key="(r, i) => JSON.stringify(r)"
                    :pagination="false"
                  >
                    <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                      <a-input-search
                        @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                        size="small"
                        placeholder="批量设置"
                      >
                        <a-icon slot="enterButton" type="plus" />
                      </a-input-search>
                    </div>
                    <span slot="attr_list" slot-scope="attr_list">
                      <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                        {{ item.attr_name }}
                      </span>
                    </span>
                    <template slot="price" slot-scope="price, attrItem, attrIndex">
                      <a-input-number
                        style="display: inherit"
                        size="small"
                        :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
                        :value="price"
                        @change="(e) => handleChange(e, 'price', attrIndex)"
                      />
                    </template>
                  </a-table>
                  <div style="margin-top: 10px; float: right">
                    <a-button @click="hide(goods, 1)">取消</a-button>
                    <a-button type="primary" @click="handleOk(goods)" style="margin-left: 10px">确认</a-button>
                  </div>
                  <div style="clear: both"></div>
                </div>
                <!-- 无规格时插槽 -->
                <div v-else>
                  <a-input-number style="width: 100%" :min="0" :step="0.01" v-model="updateParams.price" />
                  <div style="margin-top: 10px; float: right">
                    <a-button @click="hide(goods, 1)">取消</a-button>
                    <a-button type="primary" @click="submitUpdate(goods, 1)" style="margin-left: 10px">确认</a-button>
                  </div>
                  <div style="clear: both"></div>
                </div>
              </MyPopover>
            </div>
          </div>
        </div>
      </template>
      <!-- 库存 -->
      <template slot="goods_num" slot-scope="text, goods">
        <div class="edit-good">
          <span> {{ text }} </span>
          <div v-if="goods.product_type == 0">
            <div style="position: relative" class="space">
              <a-icon
                class="table_operator_icon"
                size="small"
                type="edit"
                title="编辑"
                v-show="currentRowId == goods.id || goods.visible2"
                @click="setAttr(goods.id, goods.attr, goods, 2)"
              />
              <MyPopover
                :title="'库存'"
                @onSubmit="submitUpdate(goods, 2)"
                :visible.sync="goods.visible2"
                :isHarf="goods.isHarf"
                :showBtn="false"
                :isAttr="goods.use_attr"
                :style="goods.use_attr == 1 ? { transform: 'translateX(-65px)', padding: '5px 20px' } : {}"
              >
                <!-- 有规格时插槽 -->
                <!-- goods.use_attr == 1 -->
                <div v-if="goods.use_attr == 1">
                  <a-table
                    v-if="attr.length > 0"
                    ref="table"
                    class="slotTable"
                    :columns="attrColumns"
                    :style="{ marginTop: '5px', maxHeight: '90px', overflowY: 'scroll', minHeight: '0px' }"
                    bordered
                    :dataSource="attr"
                    size="small"
                    :row-key="(r, i) => JSON.stringify(r)"
                    :pagination="false"
                  >
                    <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                      <a-input-search
                        @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                        size="small"
                        placeholder="批量设置"
                      >
                        <a-icon slot="enterButton" type="plus" />
                      </a-input-search>
                    </div>
                    <span slot="attr_list" slot-scope="attr_list">
                      <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                        {{ item.attr_name }}
                      </span>
                    </span>
                    <template slot="num" slot-scope="num, attrItem, attrIndex">
                      <a-input-number
                        style="display: inherit"
                        size="small"
                        :autoFocus="autoFocusData.type == 'num' && autoFocusData.index == attrIndex"
                        :value="num"
                        @change="(e) => handleChange(e, 'num', attrIndex)"
                      />
                    </template>
                  </a-table>
                  <div style="margin-top: 10px; float: right">
                    <a-button @click="hide(goods, 2)">取消</a-button>
                    <a-button type="primary" @click="handleOk(goods)" style="margin-left: 10px">确认</a-button>
                  </div>
                  <div style="clear: both"></div>
                </div>
                <!-- 无规格时插槽 -->
                <div v-else>
                  <a-input-number style="width: 100%" :min="0" :step="1" v-model="updateParams.goods_num" />
                  <div style="margin-top: 10px; float: right">
                    <a-button @click="hide(goods, 2)">取消</a-button>
                    <a-button type="primary" @click="submitUpdate(goods, 2)" style="margin-left: 10px">确认</a-button>
                  </div>
                  <div style="clear: both"></div>
                </div>
              </MyPopover>
            </div>
          </div>
        </div>
      </template>
      <!-- 虚拟销量 -->
      <template slot="virtual_sales" slot-scope="text, goods">
        <div class="edit-good">
          <span>
            {{ text }}
          </span>
          <div>
            <div style="position: relative" class="space">
              <a-icon
                class="table_operator_icon"
                size="small"
                v-show="currentRowId == goods.id || goods.visible4"
                type="edit"
                @click="openPopover(goods, 4, $event)"
                title="编辑"
              />
              <MyPopover
                :title="'虚拟销量'"
                @onSubmit="submitUpdate(goods, 4)"
                :visible.sync="goods.visible4"
                :isHarf="goods.isHarf"
              >
                <a-input-number style="width: 100%" :min="0" v-model="updateParams.virtual_sales" />
              </MyPopover>
            </div>
          </div>
        </div>
      </template>
      <!-- 上下架 -->
      <a-switch
        slot="status"
        checked-children="开"
        un-checked-children="关"
        slot-scope="status, goods"
        :checked="status > 0"
        @change="onConfirmStatus('status', goods.id)"
      />
      <!-- 推荐 -->
      <a-switch
        slot="is_recommend"
        checked-children="开"
        un-checked-children="关"
        slot-scope="is_recommend, goods"
        :checked="is_recommend > 0"
        @change="onConfirmStatus('is_recommend', goods.id)"
      />
      <!-- 快速购买 -->
      <!-- <a-switch
        slot="quick_purchase"
        slot-scope="quick_purchase, goods"
        checked-children="加入"
        un-checked-children="关闭"
        :checked="quick_purchase == '1'"
        @change="onConfirmStatus('quick_purchase', goods.id)"
      /> -->
      <!-- 操作 -->
      <span slot="action" slot-scope="text, goods">
        <a @click="onEdit(goods.id)">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="synchronizationGood(goods.id)">同步门店商品</a>
            </a-menu-item>
            <a-menu-item v-show="goods.use_attr == 1">
              <a href="javascript:;" @click="editAttr(goods)">编辑规格</a>
            </a-menu-item>
            <a-menu-item v-if="goods.product_type == 0">
              <a href="javascript:;" @click="openDrawer(goods.id, goods)">满减设置</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="showQscode(goods.id)">小程序二维码</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="copyUrl(goods.id)">复制小程序链接</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="delGoodById(goods.id)">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>
    <div class="scroll_wrapper" v-show="isScoll">
      <div class="scroll_track">
        <div class="scroll_item my_scroll_item"></div>
      </div>
    </div>
    <SaleConfDrawer :visible.sync="isShowSaleConfDrawer" :goodsId="goodsId" :currentGood="currentGood"></SaleConfDrawer>
    <EditAttrModal
      :visible="isShowEditAttrModal"
      :currentGood="currentGood"
      @onAfterClose="onAfterClose"
    ></EditAttrModal>
  </div>
</template>

<script>
import { list, status, updateAll as updateAllApi, setAttrNum, setAttr, getQr, synchronizationOutlet } from '@/api/goods/goods'
import { STable } from '@/components'
import SaleConfDrawer from './SaleConfDrawer'
import EditAttrModal from './EditAttrModal'
import MyPopover from './MyPopover'

const columns = [
  {
    title: '商品ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: '产品名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'goods_name' },
  },
  {
    title: '产品类型',
    dataIndex: 'product_type',
    key: 'product_type',
    width: 100,
    scopedSlots: { customRender: 'product_type' },
  },
  {
    title: '售价',
    dataIndex: 'price',
    key: 'price',
    width: 120,
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    key: 'goods_num',
    width: 120,
    scopedSlots: { customRender: 'goods_num' },
  },
  {
    title: '虚拟销量',
    dataIndex: 'virtual_sales',
    key: 'virtual_sales',
    width: 100,
    scopedSlots: { customRender: 'virtual_sales' },
  },
  {
    title: '上下架',
    dataIndex: 'status',
    width: 30,
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '推荐',
    dataIndex: 'is_recommend',
    width: 30,
    key: 'is_recommend',
    scopedSlots: { customRender: 'is_recommend' },
  },
  // {
  //   title: '快速购买',
  //   dataIndex: 'quick_purchase',
  //   width: 120,
  //   key: 'quick_purchase',
  //   scopedSlots: { customRender: 'quick_purchase' },
  // },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: { customRender: 'action' },
  },
]

const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 200,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 80,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 80,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
]

export default {
  components: {
    STable,
    SaleConfDrawer,
    MyPopover,
    EditAttrModal,
  },
  props: {
    status: {
      type: Number,
      default: -1,
    },
    queryParam: {
      type: Object,
      default: () => {
        return {
          name: '',
          cat_id: 0,
          status: -1,
          mch_id: 0,
        }
      },
    },
  },
  data() {
    return {
      isShowEditAttrModal: false,
      isScoll: 0,
      currentRowId: '',
      goodsId: '',
      columns: columns,
      selectedRowKeys: [],
      goods_id: 0,
      attr: [],
      visible: false,
      attrColumns: attrColumns,
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数
      loadData: (parameter) => {
        var newObj = {}
        Object.assign(newObj, parameter, this.queryParam, { status: this.status })
        let that = this
        return list(newObj).then((res) => {
          res.data.data.forEach((item, index) => {
            item['visible0'] = false
            item['visible1'] = false
            item['visible2'] = false
            item['visible3'] = false
            item['visible4'] = false
            if (index + 1 > Math.floor(res.data.data.length / 2)) {
              item.isHarf = true
            } else {
              item.isHarf = false
            }
            if (index < 2) {
              item.isHarf = false
            }
          })
          that.$emit('onBookGoodsIds', res.book_goods_ids)
          this.isLengthNull(res.data.data.length)
          return res.data
        })
      },
      updateParams: {
        name: '',
        price: null,
        virtual_sales: null,
        goods_num: null,
      },
      isShowSaleConfDrawer: false,
      currentGood: {},
    }
  },
  created() {},
  mounted() {
    console.log('mount')
    this.pushScrollBar()
  },
  methods: {
    // 单个同步商品
    synchronizationGood (id) {
      const that = this
      this.$confirm({
        title: '是否同步该商品?',
        onOk () {
          const hide = that.$message.loading('处理中...')
          synchronizationOutlet({
            goods_id: [id]
          }).then((res) => {
            if (res.code === 0) {
              that.$message.success(res.msg)
            } else {
              that.$message.error(res.msg)
            }
          }).catch(error => {
            console.log(error)
          }).then(() => {
            hide()
          })
        },
        onCancel() {},
      })
    },
    onAfterClose (type) {
      this.isShowEditAttrModal = false
      this.currentGood = {}
      if (type) {
        this.$refs.tableList.refresh(false)
      }
    },
    editAttr(goods) {
      this.currentGood = goods
      this.isShowEditAttrModal = true
    },
    pushScrollBar() {
      const type = this.status == -1 ? 0 : this.status == 1 ? 1 : this.status == 0 ? 2 : 0
      const son = document.getElementsByClassName('my_scroll_item')[type]
      const table = document.getElementsByClassName('ant-table-body')[type]
      const sx = table.scrollWidth - table.offsetWidth
      this.isScoll = sx
      table.addEventListener('scroll', function (e) {
        const scrollleft = e.target.scrollLeft
        son.style.left = (210 * scrollleft) / sx + 'px'
      })
      son.onmousedown = function (event) {
        var e = event || window.event
        var x = e.clientX - this.offsetLeft
        window.onmousemove = function (event) {
          var e = event || window.event
          var jlx = e.clientX - x
          if (jlx <= 0) {
            table.scrollLeft = '0px'
            son.style.left = 0
          } else if (jlx >= 210) {
            son.style.left = '210px'
            table.scrollLeft = sx
          } else {
            son.style.left = jlx + 'px'
            table.scrollLeft = (jlx * sx) / 210
          }
        }
        window.onmouseup = function () {
          window.onmousemove = null
        }
      }
    },
    isLengthNull(length) {
      const start = this.$refs.tableList.$el
      const doms = start.getElementsByClassName('ant-table-body')
      if (length == 0) {
        doms[0].style.minHeight = '0px'
      } else {
        doms[0].style.minHeight = '380px'
      }
    },
    oooo(row, index) {
      this.$set(row, 'visible' + index, false)
    },
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    openDrawer(id, goods) {
      this.currentGood = goods
      this.goodsId = id
      this.isShowSaleConfDrawer = true
    },
    copyUrl(id) {
      this.$copyText(`goods/goods/goods?id=${id}`).then(
        () => {
          this.$message.success('复制成功！')
        },
        () => {
          this.$message.error('复制成功！')
        }
      )
    },
    showQscode(id) {
      const h = this.$createElement
      this.$message.loading({ content: '请求中...', key: 'qrcodeLoading' })
      getQr({
        id,
      })
        .then((res) => {
          if (res.code === 0) {
            console.log(res)
            const qrcodeUrl = res.data.qr_url
            this.$info({
              title: '小程序二维码',
              content: h('img', {
                attrs: {
                  src: qrcodeUrl,
                },
                style: {
                  width: '100%',
                  margin: '10px auto',
                },
              }),
            })
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.$message.destroy()
        })
    },
    submitUpdate(row, index) {
      if (!this.updateParams.name) {
        this.$message.warn('商品名称不能为空')
        return
      }
      const params = {
        id: row.id,
        type: '',
        value: '',
      }
      switch (index) {
        case 0:
          params.type = 'name'
          params.value = this.updateParams.name
          break
        case 1:
          params.type = 'price'
          params.value = this.updateParams.price
          break
        case 2:
          params.type = 'goods_num'
          params.value = this.updateParams.goods_num
          break
        case 4:
          params.type = 'virtual_sales'
          params.value = this.updateParams.virtual_sales
          break
        default:
          break
      }
      setAttr(params).then((res) => {
        if (res.code === 0) {
          this.$nextTick(() => {
            this.$refs.tableList.refresh(false)
          })
        } else {
          this.$message.error(res.msg)
        }
      })
      this.hide(row, index)
    },
    openPopover(row, index, e) {
      this.$refs.tableList.$data.localDataSource.forEach((item) => {
        item.visible0 = false
        item.visible1 = false
        item.visible2 = false
        item.visible3 = false
        item.visible4 = false
      })
      this.$set(this.updateParams, 'name', row.name)
      this.$set(this.updateParams, 'price', parseFloat(row.price))
      this.$set(this.updateParams, 'virtual_sales', Number(row.virtual_sales))
      this.$set(this.updateParams, 'goods_num', Number(row.goods_num))
      this.$set(row, 'visible' + index, true)
    },
    hide(row, index, e) {
      this.$set(row, 'visible' + index, false)
    },
    updateCheck(res) {
      return false
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.tableList.refresh(true)
      })
    },
    onEdit(id) {
      if (id > 0) {
        this.$router.push({ name: 'GoodsEdit', query: { id: id } })
      } else {
        this.$router.push({ name: 'GoodsEdit' })
      }
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    delGoodById(id) {
      var that = this
      this.$confirm({
        title: '是否删除该条数据?',
        onOk() {
          updateAllApi({
            type: 'is_delete',
            status: 1,
            goods_id: [id],
          }).then((res) => {
            if (res.code === 0) {
              that.$nextTick(() => {
                that.$refs.tableList.$data.localDataSource = []
                that.$refs.tableList.refresh(false)
              })
            } else {
              that.$message.error(res.msg)
            }
          })
        },
        onCancel() {},
      })
    },
    updateAll(type, status) {
      if (!this.selectedRowKeys.length) {
        this.$message.warn('请先勾选商品')
        return
      }
      var text = '删除'
      var that = this
      if (type === 'status') {
        text = status === 1 ? '上架' : '下架'
      } else if (type === 'quick_purchase') {
        text = status === 1 ? '加入快速购买' : '关闭快速购买'
      }
      this.$confirm({
        title: '是否批量' + text + '?',
        onOk() {
          updateAllApi({
            type: type,
            status: status,
            goods_id: that.selectedRowKeys,
          }).then((res) => {
            if (res.code === 0) {
              that.$nextTick(() => {
                that.$refs.tableList.$data.localDataSource = []
                that.$refs.tableList.refresh(false)
              })
            } else {
              that.$message.error(res.msg)
            }
          })
        },
        onCancel() {},
      })
    },
    onConfirmStatus(type, goodsId) {
      var that = this
      status({ id: goodsId, type: type }).then((res) => {
        if (res.code === 0) {
          this.refresh()
          this.$message.success(res.msg)
        } else {
          that.$nextTick(() => {
            that.$refs.tableList.$data.localDataSource = []
            that.$refs.tableList.refresh(false)
          })
          this.$message.error(res.msg)
        }
      })
    },
    updateParam(value, type) {
      console.log(value)
      this.queryParam[type] = value
    },
    setAttr(goodsId, attr, goods, index) {
      this.attr = JSON.parse(attr)
      this.goods_id = goodsId
      // this.visible = true
      if (goods.use_attr == 1) {
        this.$refs.tableList.$data.localDataSource.forEach((item) => {
          item.visible0 = false
          item.visible1 = false
          item.visible2 = false
          item.visible3 = false
          item.visible4 = false
        })
        this.editAttr(goods)
      } else {
        this.openPopover(goods, index)
      }
    },
    handleOk(goods) {
      this.$message.loading({ content: '提交中', key: 'loading' })
      var that = this
      setAttrNum({
        attr: this.attr,
        id: this.goods_id,
      }).then((res) => {
        if (res.code === 0) {
          this.visible = false
          that.$refs.tableList.$data.localDataSource = []
          that.$refs.tableList.refresh(false)
          this.$message.success({ content: res.msg, key: 'loading' })
        } else {
          this.$message.error({ content: res.msg, key: 'loading' })
        }
        this.hide(goods, 2)
      })
    },
    /**
     * 修改规格数据
     */
    handleChange(value, type, index) {
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.attr[index][type] = value === null ? '' : value
    },
    settingAll(e, setSelectedKeys, selectedKeys) {
      this.attr.forEach((element, index) => {
        this.attr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-body {
  min-height: 360px;
}
.slotTable {
  /deep/.ant-table-row-cell-break-word {
    padding: 2px 8px !important;
  }
  /deep/.ant-table-body {
    min-height: 0px;
  }
}
.scroll_wrapper {
  position: fixed;
  width: 290px;
  height: 24px;
  line-height: 22px;
  bottom: 50px;
  background: #ffffff;
  text-align: center;
  left: 65%;
  z-index: 999;
  transform: translateX(-50%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  opacity: 0.8;
  .scroll_track {
    width: 260px;
    display: inline-block;
    height: 10px;
    background: #f1f1f1;
    border-radius: 5px;
    opacity: 1;
    position: relative;
    .scroll_item {
      position: absolute;
      left: 0;
      top: -1px;
      width: 50px;
      height: 12px;
      cursor: pointer;
      background: #1890ff;
      border: 2px solid #ffffff;
      border-radius: 6px;
    }
  }
}
/deep/.ant-table-body::-webkit-scrollbar {
  display: none; /*ChromeSafari*/
}
.fixPosition {
  display: inline-block;
  transform: translateX(-18px);
  color: transparent;
  cursor: pointer;
}
.of_el {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
.text_ellipsis {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table_operator_icon {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.edit-good {
  display: flex;
  align-items: center;
}
.good_info {
  width: 100%;
  display: flex;
  align-items: flex-start;
  img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 24px;
  }
}
.space {
  width: 30px;
  height: 30px;
}
</style>
